<template>
	<div class="addworktime-container">
		<el-dialog title="新增工作时间规则" custom-class="addworktime-dialog" :visible.sync="showAddWorkTime" min-width="580px" :before-close="closeAddWorkTime">
			<el-form :model="form" label-width="100px" label-position="left" :rules="rules" ref="addWorkTimeruleForm">
				<el-form-item label="规则名称" prop="addName" class="rulesName">
					<el-input class="workTimeInput" v-model="form.addName" placeholder="请输入规则名称" maxlength="40" @input="e => (form.addName = validForbid(e))"></el-input>
				</el-form-item>
				<div class="time">
					<ul>
						<li>时</li>
						<li>分</li>
						<li>秒</li>
					</ul>
					<ul>
						<li>时</li>
						<li>分</li>
						<li>秒</li>
					</ul>
				</div>
				<div class="addWorkTime-content">
					<div class="timeReg">
						<span class="redFont">*</span>
						<span>工作时间</span>
					</div>
					<div class="workTime" v-for="(item, index) in form.addWorkTime" :key="index">
						<el-form-item :prop="'addWorkTime.' + index + '.startHour'" :rules="rules.startHour" :inline-message="false">
							<el-select v-model="item.startHour" placeholder="" :popper-append-to-body="false">
								<el-option v-for="sItem in timeList" :key="sItem.value" :label="sItem.label" :value="sItem.label"></el-option>
							</el-select>
						</el-form-item>

						<span class="margin-left-10">：</span>
						<el-form-item style="margin-left: -70px" :prop="'addWorkTime.' + index + '.startMinute'" :rules="rules.startMinute" :show-message="false">
							<el-select v-model="item.startMinute" placeholder="" :popper-append-to-body="false">
								<el-option v-for="sItem in minuteList" :key="sItem.value" :label="sItem.label" :value="sItem.label"></el-option>
							</el-select>
						</el-form-item>
						<span class="margin-left-10">：</span>
						<el-form-item label="" style="margin-left: -70px" :prop="'addWorkTime.' + index + '.startSecond'" :rules="rules.startSecond">
							<el-select v-model="item.startSecond" placeholder="" :popper-append-to-body="false">
								<el-option v-for="sItem in minuteList" :key="sItem.value" :label="sItem.label" :value="sItem.label"></el-option>
							</el-select>
						</el-form-item>
						<span class="margin-left-20">—</span>
						<el-form-item style="margin-left: -70px" :prop="'addWorkTime.' + index + '.endHour'" :rules="rules.endHour" :show-message="showInvalidTimeIntervalWarning">
							<el-select v-model="item.endHour" placeholder="" :popper-append-to-body="false">
								<el-option v-for="sItem in timeList" :key="sItem.value" :label="sItem.label" :value="sItem.label"></el-option>
							</el-select>
						</el-form-item>
						<span class="margin-left-10">：</span>
						<el-form-item style="margin-left: -60px" :prop="'addWorkTime.' + index + '.endMinute'" :rules="rules.endMinute" :show-message="false">
							<el-select v-model="item.endMinute" placeholder="" :popper-append-to-body="false">
								<el-option v-for="sItem in minuteList" :key="sItem.value" :label="sItem.label" :value="sItem.label"></el-option>
							</el-select>
						</el-form-item>
						<span class="margin-left-10">：</span>
						<el-form-item style="margin-left: -70px" :prop="'addWorkTime.' + index + '.endSecond'" :rules="rules.endSecond" class="rulesScond">
							<el-select v-model="item.endSecond" placeholder="" :popper-append-to-body="false">
								<el-option v-for="sItem in minuteList" :key="sItem.value" :label="sItem.label" :value="sItem.label"></el-option>
							</el-select>
						</el-form-item>
						<div class="btn">
							<img
								@click="addWorkingTime"
								:class="showdeleteIcon ? 'del-btn' : 'add-btn'"
								:src="insertImage"
								v-show="isActiveIcon && index === form.addWorkTime.length - 1 && index !== 4"
							/>
							<img @click="deleteWorkingTime(index)" :class="showdeleteIcon ? 'add-btn' : 'del-btn'" :src="deleteImage" v-show="showdeleteIcon" />
						</div>
					</div>
					<p class="error-tips" v-show="isVaildated">* {{ errorText }}</p>
				</div>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="addWorkTimeData">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import deleteImg from '@/assets/img/icon/del_group.png';
import insertImg from '@/assets/img/icon/add_group.png';
export default {
	name: 'addWorkTime',
	props: {
		showAddWorkTime: {
			type: Boolean,
			required: true,
			default: () => false
		}
	},
	data() {
		const vaildateWokingTime = (rule, value, callback) => {
			if (value.trim() === '') {
				this.errorText = '请选择工作时间';
				this.isVaildated = true;
				return callback(new Error(''));
			}
			return callback();
		};
		return {
			form: {
				addName: '', //添加工作名称
				addWorkTime: [] //添加工作时间
			},
			errorText: '请选择工作时间',
			timeList: [
				{ value: '0', label: '00' },
				{ value: '1', label: '01' },
				{ value: '2', label: '02' },
				{ value: '3', label: '03' },
				{ value: '4', label: '04' },
				{ value: '5', label: '05' },
				{ value: '6', label: '06' },
				{ value: '7', label: '07' },
				{ value: '8', label: '08' },
				{ value: '9', label: '09' },
				{ value: '10', label: '10' },
				{ value: '11', label: '11' },
				{ value: '12', label: '12' },
				{ value: '13', label: '13' },
				{ value: '14', label: '14' },
				{ value: '15', label: '15' },
				{ value: '16', label: '16' },
				{ value: '17', label: '17' },
				{ value: '18', label: '18' },
				{ value: '19', label: '19' },
				{ value: '20', label: '20' },
				{ value: '21', label: '21' },
				{ value: '22', label: '22' },
				{ value: '23', label: '23' }
			],
			minuteList: [
				{ value: '0', label: '00' },
				{ value: '1', label: '01' },
				{ value: '2', label: '02' },
				{ value: '3', label: '03' },
				{ value: '4', label: '04' },
				{ value: '5', label: '05' },
				{ value: '6', label: '06' },
				{ value: '7', label: '07' },
				{ value: '8', label: '08' },
				{ value: '9', label: '09' },
				{ value: '10', label: '10' },
				{ value: '11', label: '11' },
				{ value: '12', label: '12' },
				{ value: '13', label: '13' },
				{ value: '14', label: '14' },
				{ value: '15', label: '15' },
				{ value: '16', label: '16' },
				{ value: '17', label: '17' },
				{ value: '18', label: '18' },
				{ value: '19', label: '19' },
				{ value: '20', label: '20' },
				{ value: '21', label: '21' },
				{ value: '22', label: '22' },
				{ value: '23', label: '23' },
				{ value: '24', label: '24' },
				{ value: '25', label: '25' },
				{ value: '26', label: '26' },
				{ value: '27', label: '27' },
				{ value: '28', label: '28' },
				{ value: '29', label: '29' },
				{ value: '30', label: '30' },
				{ value: '31', label: '31' },
				{ value: '32', label: '32' },
				{ value: '33', label: '33' },
				{ value: '34', label: '34' },
				{ value: '35', label: '35' },
				{ value: '36', label: '36' },
				{ value: '37', label: '37' },
				{ value: '38', label: '38' },
				{ value: '39', label: '39' },
				{ value: '40', label: '40' },
				{ value: '41', label: '41' },
				{ value: '42', label: '42' },
				{ value: '43', label: '43' },
				{ value: '44', label: '44' },
				{ value: '45', label: '45' },
				{ value: '46', label: '46' },
				{ value: '47', label: '47' },
				{ value: '48', label: '48' },
				{ value: '49', label: '49' },
				{ value: '50', label: '50' },
				{ value: '51', label: '51' },
				{ value: '52', label: '52' },
				{ value: '53', label: '53' },
				{ value: '54', label: '54' },
				{ value: '55', label: '55' },
				{ value: '56', label: '56' },
				{ value: '57', label: '57' },
				{ value: '58', label: '58' },
				{ value: '59', label: '59' }
			],
			isVaildated: false,
			deleteImage: deleteImg,
			insertImage: insertImg,
			showWorkTime: true, //工作时间显示隐藏添加
			isActiveIcon: true, // 当前激活的图标
			showdeleteIcon: false, //- 减号 icon图标显示隐藏
			showInvalidTimeIntervalWarning: false, //当前输入的时间段存在覆盖情况文案，显示隐藏
			rules: {
				addName: [{ required: true, message: '请填写规则名称', trigger: 'blur' }],
				startHour: [{ validator: vaildateWokingTime, trigger: ['blur'] }],
				startMinute: [{ validator: vaildateWokingTime, trigger: ['blur'] }],
				startSecond: [{ validator: vaildateWokingTime, trigger: ['blur'] }],
				endHour: [{ validator: vaildateWokingTime, trigger: ['blur'] }],
				endMinute: [{ validator: vaildateWokingTime, trigger: ['blur'] }],
				endSecond: [{ validator: vaildateWokingTime, trigger: ['blur'] }]
			},
			formatTimes: []
		};
	},
	mounted() {
		this.addWorkingTime();
		this.showdeleteIcon = false;
	},
	methods: {
		closeAddWorkTime() {
			this.$emit('closeAddWorkTime');
			this.$refs.addWorkTimeruleForm.resetFields();
			this.form.addWorkTime.splice(1, this.form.addWorkTime.length);
			this.showdeleteIcon = false;
		},
		// + 号icon 添加工作时间
		addWorkingTime() {
			let wokTime = { startHour: '', startMinute: '', startSecond: '', endHour: '', endMinute: '', endSecond: '' };
			this.form.addWorkTime.push(wokTime);
			this.showdeleteIcon = true;
		},
		// - 号icon 删除工作时间
		deleteWorkingTime(index) {
			if (this.form.addWorkTime.length - 1 === 1) {
				this.showdeleteIcon = false;
				this.isActiveIcon = true;
			}
			this.form.addWorkTime.splice(index, 1);
		},
		clearValidate(type) {
			this.$refs['addWorkTimeruleForm'].clearValidate(type);
		},
		addWorkTimeData() {
			let data = {};
			data.name = this.form.addName;
			data.id = this.workingTimeId;
			data.times = [];
			this.form.addWorkTime.forEach(currTime => {
				let startTime, endTime;
				startTime = currTime.startHour + ':' + currTime.startMinute + ':' + currTime.startSecond;
				endTime = currTime.endHour + ':' + currTime.endMinute + ':' + currTime.endSecond;
				data.times.push({ startTime: startTime, endTime: endTime });
			});

			this.$refs.addWorkTimeruleForm.validate(valid => {
				if (valid) {
					this.formatTimes = data.times;
					let startTimeArr = [];
					let endTimeArr = [];

					// 遍历判断结束时间是否大于开始时间
					this.formatTimes.forEach(time => {
						startTimeArr.push(time.startTime);
						endTimeArr.push(time.endTime);
					});

					// 排序查找重复字段
					let allStartTime = startTimeArr.sort();
					let allEndTime = endTimeArr.sort();
					for (let k = 0; k < allStartTime.length; k++) {
						if (this.formatTimes[k].startTime >= this.formatTimes[k].endTime) {
							this.errorText = '当前输入时间段存在覆盖情况，请修改后重试！';
							this.isVaildated = true;
							return;
						}
						if (allStartTime[k] <= allEndTime[k - 1]) {
							console.log(k);
							this.errorText = '当前输入时间段存在覆盖情况，请修改后重试！';
							this.isVaildated = true;
							return;
						}
						this.errorText = '';
						this.isVaildated = false;
					}
					this.$emit('addWorkTimeData', data);
					this.$refs.addWorkTimeruleForm.resetFields();
				} else {
					return false;
				}
			});
		}
	}
};
</script>

<style scoped lang="less">
.addworktime-container {
	display: flex;
	.time {
		display: flex;
		padding: 0 65px;
		ul {
			display: flex;
			li {
				padding: 0 36px;
				font-size: 12px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;
			}
		}
	}
	.addWorkTime-content {
		margin-top: -20px;
	}
	.timeReg {
		position: relative;
		top: 30px;
		left: 0;
		.redFont {
			color: #f56c6c;
		}
	}
	.error-tips {
		padding-left: 100px;
		color: #f56c6c;
	}
	.workTime {
		display: flex;
		.borderColor {
			height: 32px;
			border-color: #f56c6c;
			border: 1px solid #f56c6c;
		}
		.workTimeFont {
			margin: 39px 0 0 100px;
			white-space: nowrap;
			position: absolute;
			color: #f56c6c;
		}
		.endWorkTime {
			white-space: nowrap;
			position: absolute;
			margin: 39px 0 0 370px;
			color: #f56c6c;
		}
		.colon {
			width: 3px;
			height: 8px;
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
			margin-right: 10px;
		}
		.margin-left-10 {
			margin-left: 10px;
			font-family: PingFang SC;
			font-weight: 700;
			font-size: 12px;
			color: #666666;
			padding: 8px 0;
		}
		.margin-left-20 {
			margin-left: 20px;
			padding: 8px 0;
		}
		.btn {
			position: relative;
		}
		.add-btn {
			position: absolute;
			bottom: 33px;
			left: 20px;
		}
		.del-btn {
			position: absolute;
			bottom: 33px;
			left: 60px;
		}
	}
}
</style>

<style lang="less">
.addworktime-dialog .el-dialog__body {
	border-bottom: 1px solid #eee;
	border-top: 1px solid #eee;
}

.addworktime-container .el-input {
	input {
		width: 234px;
		height: 36px;
		margin-left: -20px;
	}
}
.workTime .el-icon-arrow-up:before {
	content: none;
}
.workTime .el-input__inner {
	padding: 0;
}
.workTime {
	input.el-input__inner {
		width: 48px;
		height: 32px;
		text-align: center;
	}
}
.workTime .el-select-dropdown__list {
	margin: 0 -3px;
}
.workTime .el-form-item__error {
	display: none;
}
.workTime .el-select > .el-select-dropdown {
	transform: translateX(-22px);
}
.workTime .el-scrollbar .el-select-group__wrap /deep/ .el-select-dropdown__item {
	text-align: center !important;
}
.workTime .el-form-item__error {
	word-break: keep-all;
	white-space: nowrap;
	position: absolute;
	left: -160px;
}
.addworktime-container .el-form-item__error {
	position: absolute;
	left: -200px;
}
.addworktime-container .rulesName .el-form-item__error {
	position: absolute;
	left: -18px;
}
.workTime .rulesScond .el-form-item__error {
	position: absolute;
	left: -210px;
}
</style>
